<template>
	<view class="BookDetail">
		<!-- 标题图片 -->
		<view class="title-img">
			<image :src="detailInfo.backgrund">
			</image>
		</view>
		<!-- 时间 -->
		<view class="time-cont" v-if="detailInfo.createTime != null">
			<text>{{ detailInfo.createTime.split('T')[0]}} {{detailInfo.createTime.split('T')[1]}}</text>

		</view>
		<!-- 标题 -->
		<view class="first-title">
			<view></view>
			<view><text>{{detailInfo.title}}</text></view>
			<view></view>
		</view>
		<!-- 文章 -->
		<view class="main-textra">
			<text class="first-textra">
				{{detailInfo.articleBody}}

			</text>
			<view>
				<text>本馆读者均可免费参加。</text>
			</view>

		</view>
		<!--  -->
		<view class="bottom-title">
			<text>快开启你的“{{detailInfo.title}}”之旅吧!</text>
		</view>
		<!--  -->
		<view class="botom-img">
			<image :src="detailInfo.backgrund">
				</imgae>
		</view>
		<!-- 评论区 -->
		<Commentary :Id="id" :isshow="false"></Commentary>
	</view>
</template>

<script>
	import Commentary from '@/components/Commentary.vue'
	export default {
		data() {
			return {
				mainContent: '',
				creatime: null,
				title: '',
				url: '',
				id: '',
				detailInfo: {
					backgrund: '',
					createTime: '',
					title: '',
					articleBody: ''
				}
			}
		},
		components: {
			Commentary
		},
		onLoad(options) {
			//浏览量加一
			const {
				id
			} = options;
			this.id = id
			this.addViewCount(id);
			this.LookDetail(id)
		},
		methods: {
			//浏览量加1
			async addViewCount(id) {
				// console.log('当前id' + typeof parseInt(id))
				let res = await this.$store.dispatch('AddViews', parseInt(id))
				if (res == 'ok') {
					uni.$emit('UpdatePrise');
				}
				// console.log(result);
			},
			//根据id文章详情
			async LookDetail(id) {
				let res = await this.$store.dispatch('LookTitleDetail', parseInt(id))
				if (res === 'ok') {
					this.detailInfo = this.$store.state.article.detailActricleInfo

					console.log('11', this.detailInfo)
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.BookDetail {
		width: 750rpx;
		height: auto;

		.title-img {
			width: 90%;
			height: 300rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}

		// 
		.time-cont {
			width: 450rpx;
			height: 50rpx;
			margin-left: 30rpx;
			font-size: 26rpx;
			line-height: 50rpx;
			margin-top: 20rpx;
		}

		// 
		.first-title {
			width: 90%;
			height: 80rpx;
			margin: 0 auto;
			display: flex;
			margin-top: 25rpx;

			view {

				&:first-child {
					width: 25%;
					border-top: 4rpx solid #6a8db8;
				}

				&:nth-child(2) {
					width: 50%;
					background-color: #6a8db8;
					line-height: 80rpx;
					color: #fff;
					font-size: 38rpx;
					font-weight: 600;
					text-align: center;
				}

				&:last-child {
					width: 25%;
					border-bottom: 4rpx solid #6a8db8;
				}

			}
		}

		// 
		.main-textra {
			padding-top: 45rpx;
			width: 85%;
			height: auto;
			margin: 0 auto;
			font-size: 30rpx;
			color: #030201;
			line-height: 40rpx;

			view {
				width: 100%;
				height: 60rpx;
				margin-top: 10rpx;
				padding-left: 7rpx;
				border-bottom: 4rpx solid #6a8db8;
			}
		}

		// 
		.bottom-title {
			width: 90%;
			height: auto;
			text-align: center;
			margin: 0 auto;
			color: #6a8db8;
			font-size: 35rpx;
			font-weight: 600;
			margin-top: 40rpx;
			padding-bottom: 40rpx;
		}

		// 
		.botom-img {
			width: 90%;
			height: 400rpx;
			margin: 40rpx auto;
			padding-bottom: 60rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}

		// 

	}
</style>
